import React, { useState } from "react";
import Sidebar from "./components/Sidebar";
import Content from "./components/Content";
import "./App.css";

function App() {
  const [activeMenu, setActiveMenu] = useState("考勤日报");
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);

  React.useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div style={{ 
      height: "calc(100vh - 160px)",
      background: "#fff",
      display: "flex",
      flexDirection: isMobile ? "column" : "row"
    }}>
      {/* 导航区域 */}
      <div style={{
        ...(isMobile ? {
          padding: "16px 16px 0 16px",
          position: "sticky",
          top: 0,
          zIndex: 100,
          background: "#f7fafd"
        } : {
          
        })
      }}>
        <Sidebar activeMenu={activeMenu} setActiveMenu={setActiveMenu} isMobile={isMobile} />
      </div>
      
      {/* 内容区域 */}
      <div style={{
        flex: 1,
        marginTop: isMobile ? 16 : 0
      }}>
        <Content activeMenu={activeMenu} />
      </div>
    </div>
  );
}

export default App;
